import React from 'react'
import { Divider } from 'antd'
import { LwjButton } from 'components'
import LwjTable from 'components/LwjTable/LwjTable'

const List = ({
                onUpdateRole,
                onDeleteRole,
                showRoleButton,
                ...tableProps
              }) => {
  const columns = [
    {
      title: '角色编码',
      dataIndex: 'name',
      key: 'name',
      align: 'left'
    }, {
      title: '角色名称',
      dataIndex: 'description',
      key: 'description',
      align: 'left'
    }, {
      title: '操作',
      key: 'handle',
      align: 'left',
      render: (text, record) => {
        if (showRoleButton) {
          return (<span>
            <LwjButton
              tooltip="修改"
              type="primary"
              shape="circle"
              size="small"
              icon="edit"
              onClick={() => onUpdateRole(record)}/>
            <Divider type="vertical"/>
            <LwjButton
              tooltip="删除"
              type="primary"
              shape="circle"
              size="small"
              icon="delete"
              onClick={() => onDeleteRole(record)}/>
            </span>)
        }
      }
    }
  ]

  return (
    <div>
      <LwjTable
        {...tableProps}
        columns={columns}/>
    </div>
  )
}

export default List
